<template>
    <div 
        class="yin"
        :style="styleObj"
        ref='yin'></div>
</template>
<script>
export default {
    name:'Yin',
    props:{
        Width:{
            type:String,
            required:false,
            default:'100px'
        },
    },
    data(){
        return{
            selfWidth:'',
            styleObj:{
                width:'',
                height:'',
                borderLeftWidth:'',
                borderRightWidth:''
            }
        }
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            // 接受%和px
             if(this.Width.indexOf('%')>-1){
                this.selfWidth=this.Width
                this.selfWidth=this.$refs.yin.offsetWidth
             }else{
                this.selfWidth=parseInt(this.Width)
             }
            this.selfWidth=this.selfWidth<10?10:this.selfWidth
            this.styleObj.width=this.selfWidth+'px'
            this.styleObj.height=this.selfWidth/8+'px'
            this.styleObj.borderLeftWidth=this.selfWidth*0.4+'px'
            this.styleObj.borderRightWidth=this.selfWidth*0.4+'px'
        }
    }
}
</script>
<style scoped>
.yin{
    box-sizing: border-box;
    border: solid #000;
    border-top: none;
    border-bottom: none;
}
</style>>